<template>
  <div id="app">
    <Topbar :key="topbarky"></Topbar>
    <Header></Header>
    <router-view @changeTopbarkey="changeKeyFn" />
    <Footer></Footer>
    <!-- 登录框 -->
    <Login v-show="isShowModal"></Login>
    <!-- 提示插件 -->
    <Toast v-show="isShowToast"></Toast>
  </div>
</template>

<script>
// 导入组件
import Topbar from "./components/Topbar.vue";
import Footer from "./components/Footer.vue";
import Header from "./components/Header.vue";
import Login from "./components/Login.vue";
import Toast from "./components/Toast.vue";
// 接口
import { JingPingAPI, ReMenAPI } from "@/request/api.js";
import { mapState } from "vuex";
export default {
  components: {
    // 注册组件
    Topbar,
    Header,
    Footer,
    Login,
    Toast,
  },
  data() {
    return {
      topbarky: 0,
    };
  },
  methods: {
    changeKeyFn() {
      this.topbarky++;
    },
  },
  computed: {
    ...mapState({
      // 登录框
      isShowModal: (state) => state.ShowModal.isShowModal,
      // 提示组件
      isShowToast: (state) => state.ShowToast.isShowToast,
    }),
  },
  async created() {
    // 使用封装的 axios
    // let res = await JingPingAPI();
    // console.log("精品：", res);
    // let res2 = await ReMenAPI();
    // console.log("热门：", res2);
  },
  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        // 重定向时不变化
        if (oldVal != "/") {
          this.topbarky++;
        }
      },
    },
  },
};
</script>
<style lang="less">
</style>
